<template>
	<a-drawer :title="title" :width="450" @close="handleCancel" :visible="visible" :maskClosable="false" :bodyStyle="{ paddingBottom: '60px' }">
		<a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
			<a-form-model-item label="终端MAC" prop="clientMac" ref="clientMac">
				<a-input :placeholder="placeholder.clientMac" v-model="form.clientMac" :disabled="isupdate" />
			</a-form-model-item>
			<a-form-model-item label="门禁名称" prop="name" ref="name"><a-input :placeholder="placeholder.name" v-model="form.name" /></a-form-model-item>
			<!-- 状态 -->
			<a-form-model-item label="启用状态"   prop="status" ref="status">
				<a-radio-group v-model="form.status" button-style="solid">
					<a-radio-button v-for="(item,index) in PassWayStatusOPT"
									:key="index"
									:value="item.value">{{item.label}}</a-radio-button>
				</a-radio-group>
			</a-form-model-item>
			<a-form-model-item label="备注" prop="remark" ref="remark"><a-textarea :placeholder="placeholder.remark" :rows="4" v-model="form.remark" /></a-form-model-item>
		</a-form-model>
		<!-- Modal 页脚 -->
		<footer class="drawer-footer"><a-button type="primary" :loading="loading" @click="onSubmit">保存</a-button></footer>
	</a-drawer>
</template>
<script>
import { dictLoad } from '../../../util/internal.api';
import { wayAdd, wayUpdate } from '../public/http';
export default {
	props: ['editRecord'],
	data() {
		return {
			isupdate: false, //是否是更新模式
			loading: false, //按钮Loading
			title: '新增门禁',
			visible: true, //modal 显示状态
			labelCol: {
				xs: {
					span: 24
				},
				sm: {
					span: 5
				}
			},
			wrapperCol: {
				xs: {
					span: 24
				},
				sm: {
					span: 16
				}
			},
			placeholder: {
				code: '门禁编码',
				clientMac: '终端设备的MAC地址',
				name: '请设置门禁名称',
				remark: '门禁备注'
			},
			form: {
				name: '',
				status: '',
				remark: null,
				clientMac: '',
			},
			rules: {
				clientMac: {
					required: true,
					message: '请填写终端设备上MAC地址',
					trigger: 'blur'
				},
				name: [
					{
						required: true,
						message: '请设置门禁名称',
						trigger: 'blur'
					},
					{
						max: 50,
						message: '门禁名称最多设置50个字符',
						trigger: 'blur'
					}
				],
				status: {
					required: true,
					message: '必须设置门禁启用状态',
					trigger: 'blur'
				},
				remark: [
					{
						required: false,
						max: 200,
						message: '备注信息请设置在200个字符以内',
						trigger: 'blur'
					}
				]
			},
			PassWayStatusOPT: [] //门禁终端状态字典
		};
	},
	methods: {
		//单选选中
		radioChange(e) {
			console.log(e);
		},
		//多选菜单
		onChange(checkedValues) {
			this.form.roleArr = checkedValues;
		},
		//表单提交事件
		onSubmit() {
			this.$refs.ruleForm.validate(valid => {
				//验证成功后进行数据提交
				if (valid) {
					this.loading = true;
					if (this.isupdate) {
						wayUpdate(this.form.id, this.form).then(res => this.xhrMsg(res));
					} else {
						wayAdd(this.form).then(res => this.xhrMsg(res));
					}
				}
			});
		},
		//新增和删除返回相同的消息构造
		xhrMsg(res) {
			if (res.code === 0) {
				//成功提醒
				this.$notification.success({
					message: '操作成功',
					description: res.message
				});
				this.visible = false;
				this.$emit('closeFun', {
					render: true
				});
			} else {
				//错误提醒
				this.$notification.error({
					message: '操作失败',
					description: res.message
				});
			}
			this.loading = false;
		},
		//关闭弹窗
		handleCancel() {
			this.visible = false;
			this.$emit('closeFun', {
				render: false
			});
		},
		//表单初始化
		fromVal() {
			let obj = {...this.editRecord};
			if (obj.id) {
				this.form = obj;
				this.isupdate = true;
				this.title = '编辑门禁';
			}
		},
		//数据初始化
		async init() {
			await dictLoad('PassWayStatus').then(res => (this.PassWayStatusOPT = res));
			this.fromVal();
		}
	},
	created() {
		this.init();
	}
};
</script>
<style scoped>
.padding10 {
	padding: 0.3rem;
}
</style>
